<template>
  <div>
    <!-- 导航栏组件 -->
    <van-nav-bar left-arrow @click-left="$router.push('/')">
      <template #right>
        <van-icon name="ellipsis" />
      </template>
      <template #title>
        <!-- 标题动画效果 -->
        <transition name="fade">
          <div class="nav-author" v-if="showHeader">
            <van-image round width="7vw" height="7vw" :src="info.aut_photo" />
            <span class="name">{{ info.aut_name }}</span>
            <span class="line">|</span>
            <!-- 关注和已关注 -->
            <span
              class="follow"
              v-if="!info.is_followed"
              @click="lookUser(true)"
              >关注</span
            >
            <span class="follow un" v-else @click="lookUser(false)"
              >已关注</span
            >
          </div>
        </transition>
      </template>
    </van-nav-bar>
    <van-skeleton title :row="40" :loading="loading">
      <!-- 文章主体 -->
      <div class="article-wrapper" @scroll="scrollEvent" ref="wrapper">
        <!-- 头部：标题 时间 作者 -->
        <div class="header" ref="header">
          <h3 class="title">
            {{ info.title }}
          </h3>
          <div class="time">
            <span>{{ info.pubdate }}</span>
            <span>|</span>
            <span>{{ info.read_count }} 阅读</span>
            <span>|</span>
            <span>{{ info.comm_count }} 评论</span>
          </div>
          <div class="author van-hairline--bottom">
            <van-image round width="10vw" height="10vw" :src="info.aut_photo" />
            <span class="name">{{ info.aut_name }}</span>
            <!-- 关注按钮和取消关注按钮 -->
            <van-button
              round
              size="small"
              color="#FC6627"
              v-if="!info.is_followed"
              @click="lookUser(true)"
              >+关注</van-button
            >
            <van-button
              round
              size="small"
              color="#ccc"
              v-else
              @click="lookUser(false)"
              >已关注</van-button
            >
          </div>
        </div>
        <!-- 内容：文章内容 -->
        <div class="main" ref="main">
          <div class="html" v-html="info.content" ref="html"></div>
          <div class="space"></div>
        </div>
        <!-- 评论：评论组件 -->
        <ArticleComment
          @scrollToSet="scrollToSet"
          :info="info"
        ></ArticleComment>
      </div>
    </van-skeleton>
  </div>
</template>

<script>
import { articlesInfo, userFollowings } from '@/api/article.js'
import highlight from 'highlight.js'
import 'highlight.js/styles/vs2015.css'
import ArticleComment from './components/article-comment.vue'
import gsap from 'gsap'
export default {
  name: 'Article',
  components: { ArticleComment },
  data () {
    return {
      id: this.$route.params.id, // 从路径中得到文章的id
      info: '',
      showHeader: false,
      loading: true
    }
  },
  created () {
    this.getData()
  },
  methods: {
    // 获取文章详情
    async getData () {
      const res = await articlesInfo(this.id)
      // console.log('文章详情', res)
      this.info = res.data
      this.loading = false
      this.$nextTick(() => {
        // html内的所有pre标签都使用高亮
        const _html = this.$refs.html.querySelectorAll('pre')
        _html.forEach(item => {
          highlight.highlightElement(item)
        })
      })
    },
    // 滚动事件
    scrollEvent () {
      let _header = this.$refs.header.scrollHeight
      let _scroll = this.$refs.wrapper.scrollTop
      this.showHeader = _scroll > _header ? true : false
    },
    // 关注和已关注
    async lookUser (bol) {
      await userFollowings(this.info.aut_id, bol)
      this.info.is_followed = bol
      this.$toast.success(bol ? '关注成功' : '取消关注')
    },
    // 到评论或者底部的滚动事件
    scrollToSet () {
      if (
        this.$refs.wrapper.scrollTop >
        this.$refs.header.offsetHeight + this.$refs.main.offsetHeight
      ) {
        gsap.to(this.$refs.wrapper, { scrollTop: 0, duration: 1.5 })
      } else {
        gsap.to(this.$refs.wrapper, {
          scrollTop:
            this.$refs.header.offsetHeight + this.$refs.main.offsetHeight,
          duration: 1.5
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.article-wrapper {
  height: 100%;
  overflow-y: auto;
  padding: 0 0 50px;
  // 头部
  .header {
    padding: 0 16px;
    .title {
      font-size: 20px;
      font-weight: normal;
      padding: 10px 0;
      margin: 0;
    }
    .time {
      font-size: 12px;
      color: #999;
      span:nth-child(2n) {
        margin: 0 5px;
        color: #ccc;
        position: relative;
        top: -1px;
      }
    }
    .author {
      display: flex;
      align-items: center;
      padding: 10px 0;
      .name {
        flex: 1;
        padding-left: 10px;
        font-size: 16px;
      }
    }
  }
  // 内容
  .main {
    .space {
      height: 16px;
      background: @geek-gray-color;
    }
    .html {
      word-break: break-all;
      width: 100%;
      overflow: hidden;
      padding: 20px 16px;
      ::v-deep img {
        max-width: 100%;
        background: #f9f9f9;
      }
      ::v-deep pre {
        white-space: pre-wrap;
        code {
          white-space: pre;
        }
      }
    }
  }
}
::v-deep .van-nav-bar__title {
  max-width: 270px;
  width: 270px;
}
.nav-author {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  > span {
    font-size: 14px;
    padding-left: 5px;
  }
  .line {
    color: #ccc;
    position: relative;
    top: -1px;
  }
  .follow {
    color: @geek-color;
    &.un {
      color: #ccc;
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
